<template>
  <div class="list">
    <div class="button-list">
      <el-button type="primary" @click="handleKickOff">发起会议</el-button>
    </div>
    <div class="custom-divider"></div>
    <el-tabs v-model="tabActive">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <component
          :is="tabComponents[item.name]"
          v-if="tabActive == item.name"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
  const tabActive = ref<string>('attended')

  const tabList = [
    { label: '我参与的会议', name: 'attended' },
    { label: '我组织的会议', name: 'organizational' },
    { label: '所有会议', name: 'all' },
  ]

  const tabComponents = {
    attended: defineAsyncComponent(() => import('./components/attended.vue')),
    organizational: defineAsyncComponent(
      () => import('./components/organizational.vue')
    ),
    all: defineAsyncComponent(() => import('./components/all.vue')),
  }
  // 路由实例
  const router = useRouter()
  // 发起会议
  const handleKickOff = () => {
    router.push({
      name: 'Meetings_Kickoff',
    })
  }
</script>

<style lang="scss" scoped>
  .list {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    .button-list {
      display: flex;
      align-items: center;
      justify-content: end;
      margin-bottom: 20px;
    }

    .custom-divider {
      position: relative;
      height: 1px;
      margin-bottom: 15px;
      background-color: #edeff2;

      &:before {
        position: absolute;
        top: 0;
        right: -20px;
        left: -20px;
        height: 1px;
        content: '';
        background-color: #edeff2;
      }
    }

    :deep(.el-tabs__header) {
      margin: 0 0 20px;
    }
  }
</style>
